<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello vue</title>
<style type="text/css">

</style>
</head>
<body>

<ol>
	<li>因为Vue不建议操作Dom元素，所以使用替换为ref($refs)来操作Dom元素</li>
</ol>
	

<ol>
	<h3>vue操作Dom元素步骤：</h3>
	<li>在需要操作的dom元素上挂载ref，使用方法为：ref:"自定名称"</li>
	<li>在组件内部里面定义好自己想要的信息方法，现在可以先定义好一个组件内部的show方法</li>
	<li>然后在vm实例上定义好一个方法，最后这个方法就可以调用组件的show方法了</li>
	<li>调用的方法为：this.$refs.ref挂载的元素.组件()</li>
</ol>





<div id="app">
  <input type="button" value="获取元素" @click="getElement" ref="mybtn">

  <h3 id="myh3" ref="h3ref">这是使用vue获取Dom元素的h3标签</h3>

  <mylogin ref='reflogin'><mylogin>


</div>









<br>
<script src="vue.js"></script>

<script type="text/javascript">

var login = {
	template:'<h1>这是登录组件</h1>',
	return:{
		msg:'login里面的return的msg'
	},
	methods:{
		show(){
			alert("调用了组件的show方法")
		}
	}
}





var vm= new Vue({
  el: '#app',

  data: {
  	 
  },
 
  methods:{
  	getElement(){
  		// console.log( this.$refs.h3ref.innerText )
  		// console.log( this.$refs.reflogin.msg)
  		this.$refs.reflogin.show()
  		
  	}

  },
  components:{
  	'mylogin':login
  }


})





</script>

	
</body>
</html>